
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
						<tr>
							<td colspan="7">数据正在加载中...</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100"
				th:include="common/page.html::pageFragement"></div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>

</div>
<script type="text/javascript">
	//JS 问题如何解决? console.log(),debugger,排除法
	/*  $(function(){
	  $("#pageId").load("doPageUI")
	 }); */
	//第一步：分页页面加载完成，向服务端发起异步请求，
	$(function() {
		//为什么要将doGetObjects函数写到load函数对应的回调内部。
		//$("#pageId").load("doPageUI",function(){
	
			doGetObjects();
			//事件注册
			$(".input-group-btn").on("click", ".btn-search", doQueryObjects)
			//第一步：页面加载完成以后，在删除按钮上进行点击事件注册。
			$(".input-group-btn").on("click", ".btn-delete", doDeleteObjects)
		$("#checkAll").on("change",doChangeTBodyCheckState)
		$("#tbodyId").on("change","input:checkbox",doChangeTHeadBoxState)
		})
	//}
	//第二步：定义异步请求处理函数
	function doGetObjects() {
		//初始化全选checkbox对象状态
		$("#checkAll").prop("checked",false);
		 var pageCurrent=$("#pageId").data("pageCurrent");
		 if(!pageCurrent)pageCurrent=1;
			var uname = $("#searchNameId").val();
			//参数封装：方法1
		let params="pageCurrent="+pageCurrent;
		if(uname)params=params+"&username="+uname;
		 //参数封装：方法2
		 //let params={"pageCurrent":pageCurrent};//json格式的js对象
		 //if(uname)params.username=uname;
		//debugger;//断点调试
		//1.定义url和参数
		const url = "log/doFindPageObjects"
		
		/* if (username)
			params.username = username;//查询时需要 */
		//2.发起异步请求
		//请问如下ajax请求的回调函数参数名可以是任意吗？//可以,必须符合标识符的规范
		/* $.getJSON(url, params, function(result) {
			//请问result是一个字符串还是json格式的js对象？对象
			doHandleQueryResponseResult(result);
		});//特殊的ajax函数 */
			 $.getJSON(url,params,doHandleQueryResult);

	}

	//第三步：定义回调函数，处理服务端的响应结果
	function doHandleQueryResult(result) {

		if (result.state == 1) {//ok
			//更新table中tbody内部的数据
			doSetTableBodyRows(result.data.records);//将数据呈现在页面上
			//更新页面page.html分页数据
			doSetPagination(result.data);//此方法写在page.html中

		} else {
			//alert(result.message);
			doSetQueryErrors(result.message);
		}
	}
	//第四步：将异步响应结果呈现在table的tbody位置。
	function doSetTableBodyRows(records) {
		//1.获取tbody对象,并清空对象
		var tBody = $("#tbodyId");
		tBody.empty();
	 //2.迭代器records记录,并将其内容追加到tbody
		/*  for ( let i=0;i<records.length;i++) {
			//2.1 构建tr对象
			var tr = $("<tr></tr>");
			//2.2 构建tds对象
			var tds = doCreateTds(records[i]);
			//2.3 将tds追加到tr中
			tr.append(tds);
			//2.4 将tr追加到tbody中
			tBody.append(tr);
		}    */
		 records.forEach(record=>tBody.append(doCreateRow(record)))
	}
	//第五步：创建每行中的td元素，并填充具体业务数据。
	function doCreateRow(records) {
		 return `<tr>
         <td><input type='checkbox' class='cItem' value=${records.id}></td>
         <td>${records.username}</td>
         <td>${records.operation}</td>
         <td>${records.method}</td>
         <td>${records.params}</td>
         <td>${records.ip}</td>
         <td>${records.time}</td>
    </tr>`;
	}

	
	//第二步：定义查询按钮对应的点击事件处理函数
	function doQueryObjects() {
		//为什莫要在此位置初始化pageCurrent的值为1?
		//数据查询时页码的初始位置也应该在第一页
		$("#pageId").data("pageCurrent", 1);
		//为什莫调用doGetObjects函数?
		//重用js代码,简化js代码编写

		doGetObjects();
	}
	
	//第二步：定义删除操作对应的事件处理函数。
	function doDeleteObjects() {
		//1.获取选中的id值
		var ids = doGetCheckedIds();//通过此函数返回一个数组,数组中储存的是选中的数据的id
		if (ids.length == 0) {
			alert("至少选择一个");
			return;
		}
		
		if(!confirm("确认删除"))return;
		//2.发送异步请求
		
		var url = "log/doDeleteObjects";
		var params = {
			"ids" : ids.toString()
		};
		//console.log(params);
		$.post(url, params, function(result) {
			if (result.state == 1) {
				alert(result.message);
				//doGetObjects();//刷新
				doRefreshAfterDeleteOK();
			} else {
				alert(result.message);
				
			}

		});

	} 
	function doSetQueryErrors (message){
		  $("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
		 }	// 第三步：定义获取用户选中的记录id的函数 
	function doGetCheckedIds(){
		 //定义一个数组,用于存储选中的checkbox的id值

		var array=[];//new Array();
		//获取tbody中所有类型为checkbox的input元素
 //迭代这些元素，每发现一个元素都会执行如下回调函数

		$("#tbodyId input:checkbox:checked").each(function(){
			  //假如此元素的checked属性的值为true
				 //调用数组对象的push方法将选中对象的值存储到数组
				array.push($(this).val());
			
		});
		return array;
	}
	 //第四步：Thead中全选元素的状态影响tbody中checkbox对象状态。
	 function doChangeTBodyCheckState(){
		//1.获取当前点击对象的checked属性的值
		var flag=$(this).prop("checked");//true or flase
		//2.将tBody中所有checkbox元素的值都修改为flag对应的值
		//第一种方案
	 /*  $("#tbodyId input[type='checkbox']")
	  .each(function(){
		  flag=flag&$(this).prop("checked")
	  }); 
 */
		
		//第二种方案
		   $("#tbodyId input[type='checkbox']")
		   .prop("checked",flag);
	   } 

		
	
	//第五步:Tbody中checkbox的状态影响thead中全选元素的状态
	function doChangeTHeadBoxState(){
		 //1.设定默认状态值
		var flag=true;
		//2.迭代所有tbody中的checkbox值并进行与操作
		$("#tbodyId input:checkbox")
		.each(function(){
			flag=flag&&$(this).prop("checked")
		});
		//3.修改全选元素checkbox的值为flag
		$("#checkAll").prop("checked",flag);
	} 
	 /*  function doChangeTBodyCheckState(){
		var isChecked = $("#checkAll").prop("checked");
		$("input[type='checkbox']").prop("checked",isChecked); 
	}  */
	//第六步：完善业务刷新方法，当在最后一页执行删除操作时，基于全选按钮状态及当前页码值，刷新页面
	  function doRefreshAfterDeleteOK(){
    	 var pageCount=$("#pageId").data("pageCount");
    	 var pageCurrent=$("#pageId").data("pageCurrent");
    	 var checked=$("#checkAll").prop("checked");
    	 if(pageCurrent==pageCount && checkAll && pageCurrent>1){
    		 pageCurrent--;
    		 $("#pageId").data("pageCurrent",pageCurrent);
    	 }
         doGetObjects();
   }

	
</script>






